<!-- 增加规格页面 -->
<template>
	<!-- 顶部部分 -->
	<view class="attribute">
		<view class="edit">
			<text>请给商品规格设置合适的属性</text>
			<text @click="show = true">编辑</text>
		</view>
		<!-- 多项选择 -->
		<view class="checkbox">
			<checkbox-group style="display: flex;" @change="checkboxChange">
				<label v-for="(item,index) in data.checkBox" :key="index">
					<checkbox color="#00ff00" :value="item.value" :checked="item.checked" /><text>{{item.name}}</text>
				</label>
			</checkbox-group>
		</view>
	</view>

	<!-- 规格生成部分 -->
	<view class="attribute gener" v-for="(item,index) in data.sku" :key="index">
		<!-- 头部 -->
		<view class="edit specs-delete">
			<text>规格{{item.ordinalNumber}}</text>
			<!-- 规格的删除按钮只有当不止一项规格时才出现  -->
			<text v-if="data.sku.length > 1" @click="delSpecs(index)">删除</text>
		</view>

		<!-- 可选的属性 口味、净含量 -->
		<view class="edit entry" v-if="item.attribute.length > 0" v-for="(item2,index2) in item.attribute" :key="index2">
			<text>{{item2.att_name}}</text>
			<input type="text" v-model="item2.att_val" :placeholder="'请输入'+ item2.att_name" placeholder-class="input-style" cursor-spacing="50">
		</view>

		<!-- 必有的价格 -->
		<view class="edit entry">
			<text>价格</text>
			<input type="number" v-model="item.price" placeholder="请输入价格" placeholder-class="input-style" cursor-spacing="50">
			<text>元</text>
		</view>

		<!-- 必有的库存 -->
		<view class="edit entry">
			<text>库存</text>
			<input type="number" v-model="item.stock" placeholder="请输入库存" placeholder-class="input-style" cursor-spacing="50">
			<text>件</text>
		</view>

		<!-- 上传规格图片 -->
		<view class="specs-image">
			<image @click="uploadImg(index)" v-if="item.imgUrl === '' " src="../../static/images/attribute-img.png" mode="aspectFill"></image>
			<image @click="previewImg(item.imgUrl)" :src="item.imgUrl" mode="aspectFill" v-else></image>
			<image @click="delImg(index)" v-if="item.imgUrl !== '' " class="delete-img" src="../../static/images/delete.svg" mode="widthFix"></image>
		</view>

	</view>

	<!-- 添加规格 -->
	<view class="attribute gener new-specs" @click="addSpecs">
		<image src="../../static/images/add.svg" mode="widthFix"></image>
		<text>规格</text>
	</view>

	<!-- 弹窗弹出设置属性 -->
	<page-container :show="show" @enter="onEnter" @clickoverlay="show = false">
		<view class="space-view">
			<view class="popup-title">
				<image @click="show = false" src="../../static/images/close.svg" mode="widthFix"></image>
				<text>修改属性</text>
				<text @click="submit">提交</text>
			</view>
			<view class="att-input" v-for="(item,index) in data.addAttribute" :key="index">
				<text>属性{{item.ordinalNumber}}</text>
				<input v-model="item.name" type="text" placeholder="请输入属性" placeholder-class="input-style" cursor-spacing="50">
			</view>
		</view>
	</page-container>

	<!-- 底部提交按钮 -->
	<view style="height: 200rpx;"></view>
	<view class="bottom-button-position">
		<view class="submit">
			<text @click="cancel">取消</text>
			<text @click="save">保存</text>
		</view>
	</view>

</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { FeedBack } from "../../public/package-js/feedBack.js"
	import { Upload } from "../../public/package-js/uploadImg.js"
	import { skuValue } from "../../public/package-js/passValue.js"
	import { onLoad } from '@dcloudio/uni-app'

	// 1、 进入时触发弹框，不写该事件，无法触发弹框事件
	function onEnter(e) {}

	// 2、控制弹出框显示
	const show = ref(false)

	//设置动态规格相关数据
	const data = reactive({
		sku: [ // 存储 sku 数据
			{
				ordinalNumber: 1, // 规格 1 2 3
				attribute: [], // 设置的规格属性（可选,当有勾选的属性时才渲染该数组）
				// attribute:  att_name: '', //属性名称 口味等  att_val: '', // 属性值
				price: '', // 价格
				stock: '', // 库存
				imgUrl: '', // 图片
				fileId: '', //用以在云端删除文件
			},
		],
		addAttribute: [ // 增加的规格属性，用来遍历渲染到规格输入详情
			{
				name: '', // 用户输入的属性名
				ordinalNumber: 1 // 属性 1 2 3 ，假定可以让商家输入三个属性
			},
			{
				name: '',
				ordinalNumber: 2
			},
			{
				name: '',
				ordinalNumber: 3
			}
		],
		checkBox: [], // 用来存储多选框要渲染的数据 
		// {
		// 	value: item.name, //用来渲染到 checkbox-group 上的 value属性
		// 	name: item.name,
		// 	checked: true // 默认新增的属性选项式被勾中的			
		// }										

	})

	// 3、生命周期接收传参进行渲染
	onLoad((val) => {
		// 传递的参数转换为数组
		let arr = JSON.parse(val.sku)
		// 如果数组为空就不操作
		if (arr.length == 0) {
			return false
		}
		console.log("传递的参数", arr);
		
		// 将传递的数据的携带的属性进行数组的组装
		const attArr = arr[0].attribute.map((item, index) => {
			return { //组装成弹窗渲染数组的样子
				name: item.att_name,
				ordinalNumber: index + 1
			}
		})
		// 将传递的数据的属性进行弹窗渲染
		attArr.forEach((item, index) => {
			data.addAttribute.forEach((item2, index2) => {
				// 如果属性序数相同，则将name赋值渲染
				if (item.ordinalNumber == item2.ordinalNumber) {
					item2.name = item.name
				}
			})
		})
		// 调用 submit 函数，渲染多选框
		submit()
		// 将传递的数据赋值给 data.sku 用于页面其余数据渲染
		data.sku = arr
		// console.log("data.sku",data.sku);
	})

	// 4、提交属性
	function submit() {
		// 如果用户重新设置属性，那么就要将规格归位，清空
		data.sku = [{
			ordinalNumber: 1, // 规格 1 2 3
			attribute: [], // 设置的规格属性（可选,当有勾选的属性时才渲染该数组） att_name: '', //属性名称 口味等  att_val: '', // 属性值
			price: '', // 价格
			stock: '', // 库存
			imgUrl: '', // 图片
		}]

		// 将输入的规格属性过滤出来
		const filter = data.addAttribute.filter(item => item.name != '')
		// console.log("filter",filter);
		let arr = [] // 创建一个空数组用来存储新增的属性
		filter.forEach(item => {
			arr.push({
				value: item.name, //用来渲染到 checkbox-group 上的 value属性
				name: item.name,
				checked: true // 默认新增的属性选项式被勾中的			
			})
		})
		// console.log("arr",arr);

		// 赋值
		data.checkBox = arr

		// 如果三个属性都不填写
		if (data.checkBox.length == 0) {
			new FeedBack("必须填写一个", "error").toast()
			return false
		}

		// 关闭弹窗
		show.value = false

		// 计算生成动态规格
		calSku()

		// 反馈提示
		new FeedBack("添加成功", "success").toast()

	}

	// 5、计算生成动态规格
	function calSku() {
		let filterArr = data.checkBox.filter(item => item.checked === true)
		// console.log("filterArr",filterArr);
		let newArr = filterArr.map(item => {
			return {
				att_name: item.name, // 左边展示的文本 口味、颜色等商家编辑的属性
				att_val: "", // 属性对应输入框的值，默认为空，用户输入的时候才改变
			}
		})
		// 遍历所有规格，将组装好的勾选的属性数组，装进每一个规格里面
		data.sku.forEach(item => {
			item.attribute = JSON.parse(JSON.stringify(newArr))
		})
	}

	// 6、新增规格
	function addSpecs() {
		// 拿到规格的序数
		let addOrdinalNumber = data.sku[data.sku.length - 1].ordinalNumber
		addOrdinalNumber++
		let newSku = {
			ordinalNumber: addOrdinalNumber, // 规格 1 2 3
			attribute: [], // 设置的规格属性（可选,当有勾选的属性时才渲染该数组） att_name: '', //属性名称 口味等  att_val: '', // 属性值
			price: '', // 价格
			stock: '', // 库存
			imgUrl: '', // 图片
		}

		// 将新增的规格push进数组
		data.sku.push(newSku)

		// 将勾选的属性过滤出来，组成一个新的数组
		let filterArr = data.checkBox.filter(item => item.checked === true)
		let newArr = filterArr.map(item => {
			return {
				att_name: item.name, // 左边展示的文本 口味、颜色等商家编辑的属性
				att_val: "", // 属性对应输入框的值，默认为空，用户输入的时候才改变
			}
		})
		// 向新增的规格中增加 勾选的属性
		data.sku[data.sku.length - 1].attribute = JSON.parse(JSON.stringify(newArr))
	}

	// 7、删除规格
	function delSpecs(index) {
		uni.showModal({
			title: '提示',
			content: '确定删除该规格吗？',
			success: function(res) {
				if (res.confirm) {
					// 删除
					data.sku.splice(index, 1)
					// 将删除后的规格的序数重新排列
					data.sku.forEach((item, index) => {
						item.ordinalNumber = index + 1
					})
					new FeedBack("删除成功", "success").toast()
				} else if (res.cancel) {
					new FeedBack("取消操作", "error").toast()
				}
			}
		});

	}

	// 8、取消勾选属性时，更改多选框对应的 checked 属性
	// 根据checked的值，重新计算规格对应的属性
	function checkboxChange(e) {
		// console.log("data.checkBox", data.checkBox);
		// console.log("e", e.detail.value);

		// 已勾选的数组
		let checkedArr = e.detail.value
		data.checkBox.forEach((item, index) => {
			// 判断 每一项的多选框名字是否包含在已勾选的数组里面
			if (checkedArr.includes(item.value)) {
				// console.log("true",item,index);
				data.checkBox[index].checked = true
			} else {
				// console.log("false",item,index);
				data.checkBox[index].checked = false
			}
		})

		// 重新计算
		calSku()
		// console.log("data.sku",data.sku);
		// console.log("data.checkBox",data.checkBox);
	}

	// 9、上传图片
	async function uploadImg(index) {
		try {
			// 上传本地文件
			let local = await new Upload().image()
			// 显示加载圈圈
			uni.showLoading({
				title: '上传中',
				mask: true
			});
			// 开始上传到云端
			let upload = await new Upload().cloud(local[0].tempFilePath)
			let imgUrl = upload.tempFileURL // 真实链接
			let fileId = upload.fileID
			data.sku[index].imgUrl = imgUrl
			data.sku[index].fileId = fileId
			// 上传成功后隐藏加载
			uni.hideLoading();
		} catch (e) {
			new FeedBack("上传失败", "error").toast()
		}
	}

	// 10、删除上传的图片
	function delImg(index) {
		uni.showModal({
			title: '提示',
			content: '确定删除该图片吗？',
			success: async function(res) {
				if (res.confirm) {
					uni.showLoading({
						title: '删除中',
						mask: true
					});
					// 删除云端的图片
					await new Upload().delFile(data.sku[index].fileId)
					// 删除渲染的图片
					data.sku[index].imgUrl = ''
					new FeedBack("删除成功", "success").toast()

				} else if (res.cancel) {
					new FeedBack("取消操作", "error").toast()
				}
			}
		});
	}

	// 11、预览图片
	function previewImg(imgUrl) {
		new Upload().preview(imgUrl, [imgUrl])
	}

	// 12、保存规格，跳转页面
	function save() {
		// 1.校验多选框的值，必须要添加有一个属性
		if (data.checkBox.length == 0) {
			new FeedBack("未添加属性", "error").toast()
			return false
		} else if (data.checkBox.length > 0) {
			// 2.必须要勾选一个属性值
			const checkedArr = data.checkBox.filter(item => item.checked == true)
			// console.log("checkedArr", checkedArr);

			if (checkedArr.length == 0) {
				new FeedBack("未勾选属性", "error").toast()
				return false
			} else {
				// 3、属性值已勾选，但是其余规格未填写
				const price = data.sku.filter(item => item.price == '')
				const stock = data.sku.filter(item => item.stock == '')
				const imgUrl = data.sku.filter(item => item.imgUrl == '')

				let arr = []
				data.sku.forEach(item => {
					// 遍历勾选的规格属性，将用户没有输入的过滤出来
					const filter = item.attribute.filter(item2 => item2.att_val == '')
					arr.push(...filter)
				})

				if (price.length || stock.length || imgUrl.length || arr.length) {
					new FeedBack("规格信息不完善", "error").toast()
					return false
				}

			}
		}

		// 将价格和库存转换为数值类型
		data.sku.forEach(item => {
			item.price = Number(item.price)
			item.stock = Number(item.stock)
		})
		console.log("data.sku", data.sku);

		// 跳转页面并传参
		// 将本页面值赋值给 公共js界面
		skuValue.value = data.sku
		uni.navigateBack()
	}

	// 13、点击取消，返回上一个页面
	function cancel() {
		uni.navigateBack()
	}
</script>

<style>
	page {
		background-color: #ededed;
	}

	/* 顶部部分 */
	.attribute {
		background-color: #f7f7f7;
		margin: 20rpx;
		padding: 20rpx 20rpx 0 20rpx;
		border-radius: 8rpx;
	}

	.edit {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.edit text:nth-child(1) {
		color: #a8a8a8;
	}

	.edit text:nth-child(2) {
		color: #616990;
	}

	.checkbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 20rpx;
	}

	.checkbox label {
		padding: 0 40rpx 20rpx 0;
	}

	/* 规格生成*/
	.gener {
		background-color: #FFFFFF !important;
	}

	.specs-delete text:nth-child(1) {
		color: #333333 !important;
		font-weight: bold;
	}

	.specs-delete {
		padding-bottom: 20rpx;
	}

	/* 规格的每一个输入项 */
	.entry {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.entry text {
		color: #333333 !important;
	}

	.entry text:nth-child(1) {
		flex: 1;
	}

	.entry input {
		padding: 0 20rpx;
		text-align: right;
	}

	.input-style {
		color: #a8a8a8;
	}

	.specs-image {
		display: flex;
		justify-content: space-between;
	}

	.specs-image image {
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		padding: 20rpx 0;
	}

	.delete-img {
		width: 40rpx !important;
		height: 40rpx !important;
	}

	/* 新增规格 */
	.new-specs image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.new-specs {
		display: flex;
		align-items: center;
		color: #5f698c;
		padding: 30rpx !important;
	}

	/* 修改属性 */
	.att-input {
		display: flex;
		align-items: center;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #e7e7e7;
	}

	.att-input text {
		flex: 1;
	}

	.att-input input {
		text-align: right;
	}

	/* 底部提交 */
	.submit {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 20rpx 20rpx 48rpx 20rpx;
	}

	.submit text {
		padding: 15rpx 60rpx;
		border-radius: 10rpx;
	}

	.submit text:nth-child(1) {
		background-color: #f7f7f7;
		color: #ce6b4e;
		margin-right: 30rpx;
	}

	.submit text:nth-child(2) {
		background-color: #ed6b51;
		color: #FFFFFF;
	}
</style>
